[#ftl]
[@define "agile.TemplateWidget" "agile._Component,agile._Container,agile._Resizable,agile._ContainerSelectorMixin,agile._PinAdvice" "InlineEditBox=dijit/InlineEditBox"]
	resizeAxis:"xy",name:"",title:"",sync:false,master:false,hasSelector:true
	[#assign templateString][#compress]			
	<div class="agileComponent agileTemplate" style="padding:0px;margin:0px" data-dojo-attach-point="containerNode">
		[#--
		<div data-dojo-attach-point="infoNode"></div>
		<div data-dojo-attach-point="containerNode" style="width:100%;height:100%"></div>
		--]
	</div>
	[/#compress][/#assign]
	,templateString:"${templateString?js_string}"
//	,templateMap:{
//		dojo:"<div {html-style}>{innerWidets}</div>"
//		,agile:"<div data-dojo-type='{declaredClass}' {id} data-dojo-props='{parameters}'>{innerWidets}</div>"
//	}
	,templateMap:{
		dojo:"<div {html-style}>{innerWidets}</div>"
		,agile:"<div data-dojo-type='{declaredClass}' data-dojo-props='{style-props}'>{innerWidets}</div>"
	}
	,attributes:agile.delegate(agile._Component.prototype.attributes,{
		group:lang.mixin({},agile.TextMetadata ,{label:agile.i18n("group",null,true),_readOnly:true,_hidden:true})
		,name: lang.mixin({},agile.TextMetadata ,{label:agile.i18n("name",null,true),pattern:"[^{};,]*"
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
				topic.publish("agile.template.update",widget,name,value);
			}
		})
		,comment:{
			onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
				widget.set(name,value);
			}
		}
		,sync:lang.mixin({},agile.BooleanMetadata ,{label:agile.i18n("sync_from_master",null,true)
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
				widget.set(name,value);
			}
		})
		,master:lang.mixin({},agile.BooleanMetadata ,{label:agile.i18n("master",null,true)
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
				widget.set(name,value);			
			}
		})
	})
//	,preamble:function(params, node){
//		console.log(this.declaredClass,"preamble params=",params,",node=",node);
//		if(params && params.group){
//			if(window.ls[params.group]){
//				//var newNode = construct.create("div",{innerHTML:window.ls[params.group]}).firstChild;
////				construct.place(window.ls[params.group],node,"replace");
////				var newParams = {};
////				for(var e in params){
////					newParams[e] = attr.get(newNode,e);
////				}
////				//arguments[0] = newParams;
////				console.log("new params=",newParams);
////				node = newNode;
//				//arguments[1] = newNode;
////				console.log("new node=",newNode.innerHTML);
//				//node.innerHTML = newNode.innerHTML;
//			}
//		}
//		this.inherited(arguments);
//		
//		//return arguments;
//	}
	,initDefaultMetadata:function(){
		this.metadata("style.width",300);
		this.metadata("style.height",200);			
		this.shortName = agile.i18n("Template",null,true);
		this.metadata("parameters.name",this.shortName);
		this.metadata("parameters.title",this.shortName);
		this.metadata("parameters.master",this.master);
		this.metadata("parameters.sync",this.sync);
	}
//	,constructor:function(params, node){
//		console.log(this.declaredClass,"constructor params=",params,",node=",node);
//	}
//	,postCreate:function(){
//		this.inherited(arguments);
//		var group = this.metadata("parameters.group");
//		if(window.ls[group]){
//			//var newNode = construct.create("div",{innerHTML:window.ls[group]});			
//			construct.place(window.ls[group],this.domNode,"replace");
//			parser.parse(this.domNode);
//		}		
//	}
	,_setMasterAttr:function(master){
		this.master = master;
		this.metadata("parameters.master",master);		
	}
	,resetWid:function(){
		//reset the widget id (wid) for all widgets to avoid duplicate wid when creating new template instances
		var newId = this.createId();
		this.metadata("id",newId);
		this.metadata("parameters.wid",newId);
		this.metadata("jsId",newId);
		query(".agileComponent",this.domNode).forEach(function(node){
			var widget = registry.getEnclosingWidget(node);
			if(widget){
				var newId = widget.createId();
				widget.metadata("id",newId);
				widget.metadata("parameters.wid",newId);
				widget.metadata("jsId",newId);
			}
		});
	}
	,init:function(){
		if(this._initTemplateWidget) return;
		this._initTemplateWidget = true;
		
		var group = this.metadata("parameters.group");
		if(!group){
			group = "tpl"+(new Date().getTime());
			this.metadata("parameters.group",group);
		}
				
		this.domNode.title = this.metadata("parameters.name") + "\n" + this.metadata("parameters.title");	
		
		this.infoNode = construct.create("div",{innerHTML:""});
		construct.place(this.infoNode,this.domNode,"first");
		style.set(this.infoNode,{left:"0px",top:"-16px",position:"absolute"});		
		//this.infoNode.innerHTML = this.metadata("parameters.name");
		
		var editWidget = new InlineEditBox({value:this.metadata("parameters.name"),width:"120px"},this.infoNode);
		editWidget.startup();
		editWidget.watch("value",lang.hitch(this,function(name,old,value){
			this.set("name",value);			
		}));
		
		this.watch("name",lang.hitch(this,function(name,old,value){
			this.metadata("parameters."+name,value);
			this.domNode.title = value + "\n" + this.metadata("parameters.title");
			this.infoNode.innerHTML = value;
		}));
		
		this.watch("title",lang.hitch(this,function(name,old,value){
			this.metadata("parameters."+name,value);
			this.domNode.title = this.metadata("parameters.name") + "\n" +value;
		}));
						
		this.watch("sync",lang.hitch(this,function(name,old,value){
			this.metadata("parameters."+name,value);
			if(value){
				this.autoSynSubcriber = this.subscribe("agile.template.sync-"+group,"syncTemplate");
				this.set("readOnly",true);
				style.set(this.infoNode,{backgroundColor:"#fafafa"});
				this.set("master",false);
				topic.publish("agile.widget.changed",null,"master",false);
			}else{
				this.unsubscribe(this.autoSynSubcriber);
				this.set("readOnly",false);
				style.set(this.infoNode,{backgroundColor:"#ffffff"});
			}
		}));
		
		if(this.metadata("parameters.sync")){			
			this.autoSynSubcriber = this.subscribe("agile.template.sync-"+group,"syncTemplate");
			this.set("readOnly",true);
			style.set(this.infoNode,{backgroundColor:"#fafafa"});
		}
		
		this.watch("master",lang.hitch(this,function(name,old,value){
			this.metadata("parameters."+name,value);
			if(value){
				//broadcast to all sibling templates 
				topic.publish("agile.template.master-"+group,this);
				this.set("sync",false);
				topic.publish("agile.widget.changed",null,"sync",false);
			}
		}));
		
		if(this.metadata("parameters.master")){
			topic.publish("agile.template.master-"+group,this);
		}
		
		//reset
		this.subscribe("agile.template.master-"+group,function(master){
			if(this != master){
				this.set("master",false);
			}
		});				
	}
//	,editTemplate:function(editable){
//		this.editable = editable;
//		if(editable){
//			style.set(this.mask,{width:"0%",height:"0%"});	
//		}else{
//			style.set(this.mask,{width:"100%",height:"100%"});
//		}
//	}	
//	,readOnly:function(){
//		var maxIndex = 0;
//		array.forEach(this._children,function(child){			
//			var idx = child.style1("z-index");
//			if(maxIndex < idx){
//				maxIndex = idx;
//			}				
//		},this);
//		maxIndex++;
//		
//		array.forEach(this._children,function(child){			
//			var idx = child.style1("z-index");
//			child.style1("z-index",idx - maxIndex);				
//		},this);
//		
//		this.childMaxZIndex = -1;
//		style.set(this.mask,{width:"100%",height:"100%",zIndex: 1});
//	}
	,adviseContextState:function(param){
		if(param == "SaveTemplate"){
			return (/*param == "EditTemplate" && this.editable || */ param == "SaveTemplate" && this.master);
		}
		return this.inherited(arguments);
	}
	,getDescription:function(){
		var name = this.metadata("parameters.name");
		return name?name:this.shortName;
	}
	,syncTemplate:function(template){
		if(this == template) return;
		//console.log(this.domNode,"**Syn template from master");
//		//this.domNode = lang.clone(template.domNode)
//		//construct.destroy(this.containerNode);
//		query(">.agileComponent",this.containerNode).forEach(function(node){
//			//construct.destroy(node);
//			registry.byNode(node).destroy();
//		},this);
//		this.containerNode.innerHTML = template.getInnerWidgetTemplate(true,0,"agile");
//		parser.parse(this.domNode);
////		query(".agileComponent",template.containerNode).forEach(function(node){
////			construct.place(lang.clone(node),this.containerNode,"last");
////		},this);
//		
	}
	,clone:function(){		
		var clonedWidget = this.inherited(arguments);
		clonedWidget.metadata("parameters.group","tpl" + (new Date().getTime()));
		//clonedWidget.metadata("parameters.name",clonedWidget.metadata("parameters.name") + "-Copy");
		return clonedWidget;
	}
	,getResizableTargetContainer:function(){
		return this.domNode;
	}
//	,getStyleNodes:function(htmlName){
//			
//		if("left top".indexOf(htmlName) != -1){
//			return [this.domNode];
//		}
//		return [this.containerNode];
//	}
[/@]
